<template>
  <div class="index-container">
    <div class="notice-area">
      <div class="notice-box">
        <div class="notice-title">
          <span style="color:red">公 告：</span>
        </div>
        <div class="notice">
          <div class="scroll">{{notice}}</div>
        </div>
      </div>
    </div>
    <summary-report :summaryData="summary"></summary-report>
  </div>
</template>

<script>
import SummaryReport from '@/components/public/SummaryReport.vue'
export default {
  name: 'FilingIndex',
  components: { SummaryReport },
  data () {
    return {
      notice: '公告',
      summary: {
        allCount: 0,
        alreadyShelf: 0,
        cancel: 0,
        finished: 0,
        noPass: 0,
        pendingReview: 0,
        waitShelf: 0,
      },
    }
  },
  mounted () {
    this.getNotice()
    this.getSummaryInfo()
  },

  methods: {
    /**
     * 获取公告内容
     */
    getNotice () {
      this.$axios.get('/api/announcement/queryAnnouncementInfo').then(resp => {
        if (resp.success) this.notice = resp.result.announcementInfo
        else this.$message.error(resp.desc)
      })
    },
    /**
     * 获取汇总信息;
     */
    getSummaryInfo () {
      this.$axios.post('/api/myFiling/dataCount').then(resp => {
        if (resp.success) {
          this.summary.finished = resp.result.buyFinish
          this.summary.alreadyShelf = resp.result.onShelves
          this.summary.noPass = resp.result.platformCancel
          this.summary.cancel = resp.result.providerCancel
          this.summary.allCount = resp.result.totalCount
          this.summary.pendingReview = resp.result.waitAuditing
          this.summary.waitShelf = resp.result.waitOnShelves
        } else this.$message.error(resp.desc)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.index-container {
  width: 1250px;
  margin: 0 auto;
}
.notice-area {
  line-height: 20px;
  font-size: 16px;
  margin-top: 30px;
  .notice-box {
    display: flex;
    align-items: center;
    width: 80%;
    margin: 0 auto;
    .notice {
      padding: 10px;
      width: 90%;
      overflow: hidden;
      .scroll {
        width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2; //限制文本的行数，只显示两行
        -webkit-box-orient: vertical;
        overflow: hidden;
        animation: scroll 20s linear infinite;
        &:hover {
          animation-play-state: paused;
        }
      }
    }
  }
}
@keyframes scroll {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
</style>
